<template>
	<view>
		<!-- <view class="navtop">
			<image @click="back" src="../../../static/index/Back_icon.png" mode="widthFix" class="back_icon" ></image>
			<text class="balance">余额提现</text>
			<image @click="godetaile" class="zhangdan_icon" src="../../../static/user2/zhangdan.png"></image>
		</view> -->
		<view class="page_header">
			<view class="status-bar"></view>
			<view class="navtop">
				<image @click="back" src="/static/index/Back_icon.png" mode="widthFix" class="back_icon"></image>
				<text class="balance">余额提现</text>
				<!-- 右边自定义图片 -->
				<image @click="godetaile" src="/static/user2/zhangdan.png" style="width: 32rpx;height: 35rpx;position: absolute;right:65rpx;"></image>
			</view>
		</view>
		<view class="status-bar"></view>
		<view class="" style="height: 100rpx ;">
		</view>
		
		<view class="main">
			<text class="frame"></text>
			<text class="tixian">请选择提现方式</text>
			<view @click="paybut(index)" class="paybox" v-for="(item,index) in payData" :key="index" >
				<image class="payimg" :src="item.payimg"></image>
				<text class="payFont">{{item.payFont}}</text>
				<image class="payone" v-show="isShow==index" :src="item.payone"></image>
			</view>
		</view>
		<view @click="gonextInfo" class="confirm">
			确认提现
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow:0,
				payData:[{
					payimg:'../../../static/user2/zfb.png',
					payFont:'支付宝',
					payone:'../../../static/user2/dui.png'
				},{
					payimg:'../../../static/user2/wx.png',
					payFont:'微信',
					payone:'../../../static/user2/dui.png'
				},{
					payimg:'../../../static/user2/yinglain.png',
					payFont:'微信',
					payone:'../../../static/user2/dui.png'
				}]
			};
		},
		methods:{
			paybut(e){
				this.isShow=e
			},
			godetaile(){
				uni.navigateTo({
					url:'../merchantSettled/withdrawalRecord'
				})
				},
			gonextInfo(){
				 uni.setStorage({
				     key: 'tixian',
				     data: this.payData[this.isShow],
				     success: function() {
				      // 存储成功后跳转房源详情页
				      uni.navigateTo({
				       url:'./tianxianIngo'
				      })
				     }
				    })
			},
			back(){
				uni.navigateBack({
					delta:1,
				})
			},
		}
	}
</script>

<style>
	.zhangdan_icon{
		width: 32rpx;
		height: 35rpx;
		position: absolute;
		top: 33rpx;
		right: 35rpx;
	}
	.main{
		width: 750rpx;
		height: 600rpx;
		position: relative;
		}
		.frame{
			display: block;
			width:10rpx;
			height:30rpx;
			background:rgba(115,34,216,1);
			border-radius:5rpx;
			position: absolute;
			top: 30rpx;
			left: 20rpx;
		}
		.tixian{
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(46,46,46,1);
			position: absolute;
			top: 25rpx;
			left: 42rpx;
		}
		.paybox{
			width:710rpx;
			height:120rpx;
			background:rgba(255,255,255,1);
			border-radius:10rpx;
			display: flex;
			align-items: center;
			position: relative;
			top: 90rpx;
			left: 20rpx;
		}
		.payimg{
			width: 70rpx;
			height: 70rpx;
			position: absolute;
			top: 25rpx;
			left: 20rpx;
		}
		.payFont{
			font-size:28rpx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(46,46,46,1);
			position: absolute;
			top: 38rpx;
			left: 105rpx;
		}
		.payone{
			width:30rpx;
			height:30rpx;
			position: absolute;
			top: 45rpx;
			right: 30rpx;
		}
		.confirm{
			width:710rpx;
			height:90rpx;
			background:rgba(115,34,216,1);
			box-shadow:0rpx 0rpx 18rpx 2rpx rgba(115,34,216,0.3);
			border-radius:20rpx;
			font-size:38rpx;
			font-family:PingFang SC;
			font-weight:bold;
			color:rgba(255,255,255,1);
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			bottom: 0rpx;
			left: 20rpx;
			}
</style>
